<script setup lang="ts">
import type { EmployeeType } from '@/apis/system/employee'
import { useEmployee } from '@/hooks'

const props = withDefaults(defineProps<Props>(), {
  placeholder: '请选择员工',
  type: undefined,
})

interface Props {
  placeholder?: string
  type?: EmployeeType
  options?: any[]
}

const model = defineModel<string | number | Array<any>>()

const { employeeList, getEmployeeList } = useEmployee()

// 转换数据为 `a-select` 的格式
const formattedEmployeeList = computed(() => {
  return employeeList.value.map(employee => ({
    label: employee.name,
    value: employee.id,
  }))
})

onMounted(() => {
  if (props.options) {
    employeeList.value = props.options
  } else {
    getEmployeeList(props.type)
  }
})
</script>

<template>
  <a-select
    v-model="model"
    :options="formattedEmployeeList"
    :placeholder="props.placeholder"
    allow-clear
    :allow-search="{ retainInputValue: true }"
  >
    <template #prefix>
      <icon-user />
    </template>
  </a-select>
</template>

<style scoped>

</style>
